<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Employee Management</title>
</head>

<body>
  <div class="main-container">
    <div class="content">
      <div class="header">
        <div class="logo">实验室管理系统</div>
      </div>
      <div class="page-title">
        <h3>借用记录</h3>
      </div>
      <div class="search-bar">
        <button class="search_button" onclick="queryData()">查询</button>
      </div>
      <table id="employee-table">
        <thead>
          <tr>
            <th>编号</th>
            <th>账号</th>
            <th>器材编号</th>
            <th>申请时间</th>
            <th>归还时间</th>
          </tr>
        </thead>
        <tbody id="employee-list">
          <!-- 员工数据将在这里动态添加 -->
        </tbody>
      </table>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

.main-container {
    display: flex;
  }

.sidebar {
    width: 200px;
    background-color: #f0f0f0;
  }


.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

.sidebar ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
  }

.sidebar ul li a:hover {
    background-color: #e0e0e0;
  }

.content {
    flex: 1;
    padding: 20px;
  }

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

.logo {
    font-weight: bold;
  }

.header-buttons button {
    margin-left: 10px;
  }

.page-title {
    margin-bottom: 20px;
  }

.search-bar {
    display: flex;
    margin-bottom: 20px;
  }

.search_button1 {
    float: right;
    margin-right: 5px;
  }


.batch-operations {
    margin-bottom: 20px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  table th,
  table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }

  table th {
    background-color: #f0f0f0;
  }

.input {
    width: 130px;
    height: 20px;
  }
</style>


<script>
  // 模拟后端数据
  const employees = [
    {
      id: '001',
      account: '15666000900',
      equipmentId: 'EQ001',
      applicationTime: '2024-01-01 10:00:00',
      returnTime: '2024-01-05 14:00:00'
    },
    {
      id: '002',
      account: '15666000901',
      equipmentId: 'EQ002',
      applicationTime: '2024-01-02 11:00:00',
      returnTime: null
    }
  ];

  window.onload = function () {
    const employeeList = document.getElementById('employee-list');
    const employeeTable = document.getElementById('employee-table');

    // 渲染员工列表
    employees.forEach(employee => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${employee.id}</td>
        <td>${employee.account}</td>
        <td>${employee.equipmentId}</td>
        <td>${employee.applicationTime}</td>
        <td>${employee.returnTime || '未归还'}</td>
      `;
      employeeList.appendChild(row);
    });
  }

  function queryData() {
    // 这里可以添加查询逻辑，例如发送请求到后端获取数据
    console.log("执行查询操作");
    // 可使用 fetch 或 XMLHttpRequest 发送请求
  }
</script>